<template>
	<view class="rejectForm">
		<view class="recordInput formItem">
			<textarea
				placeholder="请填写拒绝原因"
				maxlength="200"
				@input="
					({ detail }) =>
						(rejectContent = (detail.value + '').substring(0, 200))
				"
				:value="rejectContent"
			></textarea>
			<reportRecord
				:showText="false"
				:audioUrl="rejectRecordList"
				@delete="deleteReportItem"
				class="record"
				@upload="getReportRecord"
			></reportRecord>
		</view>
		<view class="rejectActionButton">
			<button class="primary-button linear btn w40" @click="rejectAction">
				确定
			</button>
			<button class="w40 second-button" @click="cancelRejection">
				取消
			</button>
		</view>
	</view>
</template>
<script>
import reportRecord from '@/subPackagesLog/components/reportRecord/reportRecord.vue'
import { refuseSchedule } from '@/apis/calendar'

export default {
	components: {
		reportRecord,
	},
	props: {
		scheduleId: {
			type: Number,
			value: 0,
		},
	},
	data() {
		return {
			rejectRecordList: [],
			rejectContent: '',
		}
	},
	methods: {
		getReportRecord(data) {
			const val = data.voiceText
			this.rejectContent += val
			this.rejectRecordList.push(data)
		},
		deleteReportItem(index) {
			this.rejectRecordList = this.rejectRecordList.filter(
				(_, idx) => idx !== index
			)
		},
		cancelRejection() {
			this.$emit('onRejectionCancel')
		},
		rejectAction() {
			// 日程拒绝
			const scheduleId = this.scheduleId
			const refuseDesc = this.rejectContent
			if (refuseDesc.length == 0) {
				uni.showToast({
					title: '请填写拒绝原因',
					icon: 'error',
				})
				return
			}
			// 语音处理
			const voices = this.rejectRecordList.map(
				({ time, voiceText, filePath }) => ({
					url: filePath,
					duration: time,
					text: voiceText,
				})
			)
			refuseSchedule({ scheduleId, refuseDesc, voices }).then((res) => {
				// successToast(res.message)
				this.$emit('onRejectionConfirm', res.message)
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.recordInput {
	display: flex;
	flex-direction: column;
	padding: 20rpx !important;
	border: solid 1px #efefef;
	margin: 16px;
	textarea {
		width: 100%;
	}
	.record {
		width: 100%;
	}
}
.formItem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30rpx;
	padding: 10rpx 20rpx;
	background: #fff;
	border: 1px solid #eee;
	margin-bottom: 30rpx;
	border-radius: 10rpx;
	.label {
		color: #999;
	}
	.values {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-left: 10rpx;
		&.disabled {
			position: relative;
			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 2;
			}
		}
		.value {
			line-height: 40rpx;
			border: 2rpx solid #e9e9e9;
			padding: 0 20rpx;
			font-size: 28rpx;
			border-left-width: 0;
			&:first-child {
				border-radius: 6rpx 0 0 6rpx;
				border-left-width: 2rpx;
			}
			&:last-child {
				border-radius: 0 6rpx 6rpx 0;
			}
		}

		.active,
		.active-0 {
			background: $primary-color;
			border-color: $primary-color;
			color: #fff !important;
		}
		.active-1 {
			background: #ec6560;
			border-color: #ec6560;
			color: #fff !important;
		}
		.active-2 {
			background: #d6837c;
			border-color: #d6837c;
			color: #fff !important;
		}
	}
	.right {
		display: flex;
		align-items: center;
	}
}
.rejectActionButton {
	display: flex;
	gap: 20rpx;
}
</style>
